<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Header from './components/Header.vue';
import { getSessionList } from '@/api/message';
import { SessionInfo } from '@/api/message/type';
import { router } from '@/router';
import { formatRelativeTime } from '@/utils/time.ts';

const list = ref([] as SessionInfo[]);
const loading = ref(true);
const refreshing = ref(false);

onMounted(() => {
    loadSessionList();
})

const loadSessionList = async () => {
    try {
        loading.value = true;
        const res = await getSessionList();
        list.value = res.data as SessionInfo[];
    } catch (error) {
        console.error('获取会话列表失败', error);
    } finally {
        loading.value = false;
        refreshing.value = false;
    }
}

const onRefresh = () => {
    refreshing.value = true;
    loadSessionList();
}

const toChat = (receiverId: string, sessionId?: string) => {
    router.push({
        name: "MessageChat",
        query: {
            receiverId: receiverId,
            sessionId: sessionId
        }
    });
}

// 格式化最后消息预览
const formatMessagePreview = (content: string): string => {
    if (!content) return '';
    // 限制长度并添加省略号
    return content.length > 30 ? content.substring(0, 30) + '...' : content;
}
</script>

<template>
    <div class="message-list-container">
        <!-- 页面头部 -->
        <div class="message-header-wrapper">
            <Header />
        </div>
        
        <!-- 消息列表内容 -->
        <div class="message-content">
            <!-- 加载状态 -->
            <div v-if="loading && !refreshing" class="loading-container">
                <van-loading type="spinner" vertical>加载中...</van-loading>
            </div>
            
            <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
                <template v-if="list.length === 0">
                    <div class="empty-list">
                        <van-empty image="chat" description="暂无聊天记录">
                            <template #default>
                                <van-button type="primary" size="small" icon="search" round @click="router.push('/message/search')">
                                    查找联系人
                                </van-button>
                            </template>
                        </van-empty>
                    </div>
                </template>
                
                <div v-else class="message-list">
                    <div 
                        v-for="(item, index) in list" 
                        :key="item.receiver.id"
                        class="message-item"
                        :class="{ 'has-unread': item.unreadCounts > 0 }"
                        @click="toChat(item.receiver.id, item.id)"
                    >
                        <!-- 用户头像 -->
                        <div class="avatar-wrapper">
                            <van-badge :content="item.unreadCounts || ''" :show="item.unreadCounts > 0">
                                <van-image 
                                    class="user-avatar" 
                                    round 
                                    fit="cover"
                                    :src="item.receiver.avatar"
                                />
                            </van-badge>
                        </div>
                        
                        <!-- 消息内容 -->
                        <div class="message-info">
                            <div class="message-header">
                                <span class="username">{{ item.receiver.nickname }}</span>
                                <span class="time">{{ formatRelativeTime(item.latestMessage.sendTime) }}</span>
                            </div>
                            <div class="message-preview">
                                {{ formatMessagePreview(item.latestMessage.content) }}
                            </div>
                        </div>
                    </div>
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.message-list-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 108px);
    background-color: #f7f8fa;
    
    .message-header-wrapper {
        background-color: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .message-content {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
        }
        
        .empty-list {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
        }
        
        .message-list {
            max-width: 800px;
            margin: 0 auto;
            
            .message-item {
                display: flex;
                align-items: center;
                padding: 16px;
                background-color: white;
                border-radius: 8px;
                margin-bottom: 12px;
                cursor: pointer;
                transition: all 0.2s;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                
                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
                }
                
                &.has-unread {
                    background-color: #f0f9ff;
                }
                
                .avatar-wrapper {
                    margin-right: 16px;
                    
                    .user-avatar {
                        width: 48px;
                        height: 48px;
                    }
                }
                
                .message-info {
                    flex: 1;
                    overflow: hidden;
                    
                    .message-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 4px;
                        
                        .username {
                            font-weight: 500;
                            font-size: 16px;
                            color: #323233;
                        }
                        
                        .time {
                            font-size: 12px;
                            color: #969799;
                        }
                    }
                    
                    .message-preview {
                        color: #646566;
                        font-size: 14px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}
</style>